<template>
  <div class="current-info">
    <div class="item">
      <div class="context">
        <div class="label">累计接收车辆日志</div>
        <div class="value">{{ info.allError }}</div>
      </div>
      <div class="context">
        <div class="label">累计分析车辆日志</div>
        <div class="value">{{ info.allAnalysis }}</div>
      </div>
    </div>

    <div class="item">
      <div class="context">
        <div class="label">一级报警统计</div>
        <div class="value">{{ info.error_level1 }}</div>
      </div>
      <div class="context">
        <div class="label">二级报警统计</div>
        <div class="value">{{ info.error_level2 }}</div>
      </div>
      <div class="context">
        <div class="label">三级报警统计</div>
        <div class="value">{{ info.error_level3 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTodayTrainErrorLevelData } from '@/api/statistics'

export default {
  name: 'CurrentTrain',
  data() {
    return {
      timer: null,
      info: {
        allError: 0,
        allAnalysis: 0,
        error_level1: 0,
        error_level2: 0,
        error_level3: 0
      }
    }
  },
  mounted() {
    this.refreshInfo()
    // this.timer = setInterval(() => {
    //   this.refreshInfo()
    // }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    refreshInfo() {
      queryTodayTrainErrorLevelData().then(res => {
        this.info.allError = res.data.receiveLogCount
        this.info.allAnalysis = res.data.analysisLogCount
        this.info.error_level1 = res.data.firstLevel
        this.info.error_level2 = res.data.secondLevel
        this.info.error_level3 = res.data.thirdLevel
      })

      // this.info.allError = parseInt(Math.random() * 1000)
      // this.info.allAnalysis = parseInt(Math.random() * 1000)
      // this.info.error_level1 = parseInt(Math.random() * 1000)
      // this.info.error_level2 = parseInt(Math.random() * 1000)
      // this.info.error_level3 = parseInt(Math.random() * 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.current-info {
    color: #fff;
    padding: 5px;

    .item {
        margin-bottom: 12px;
        .context {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 24px;
        }
    }
    .label {
        font-size: 12px;
    }

    .value {
        font-weight: bold;
        text-align: center;
        color: #52BCA9;
    }
}
</style>

